<template>
  <div class="record">
    <div class="list">
      <div
        class="item dfsp size14"
        v-for="(item, index) in ListData"
        :key="index"
        @click="withdrawaldetail(item.id)"
      >
        <div>
          <span class="title">{{ t('batch_no') }} ：</span>
          <span class="content-no">{{ item.batch_no || '' }}</span>
        </div>
        <div>
          <span class="title">{{ t('cash') }} ：</span>
          <span class="content-cash">{{ item.cash }}</span>
        </div>
        <div>
          <span class="title">{{ t('createtime') }} ：</span>
          <span class="content-time">{{ item.createtime }}</span>
        </div>
        <div class="isaudit">
          <span class="title">{{ t('isaudit') }} ：</span>
          <span :class="statusStyle(item.isaudit)">{{ item.isaudit }}</span>
        </div>
      </div>

      <div class="NoData" v-if="ListData.length == 0">
        <img src="@/style/img/zwsj.png" alt="" />
      </div>
    </div>

    <div class="pagination">
      <el-pagination
        v-model:current-page="page.page"
        v-model:page-size="page.page_size"
        :page-sizes="[10, 20, 30, 40]"
        :small="small"
        :disabled="disabled"
        :background="background"
        layout="total,sizes, prev, pager, next"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>

    <el-dialog v-model="dialogVisible" width="30%">
      <div class="detail f16">
        <div class="title">
          <text>{{ t('batch_no') }} ：</text>
          {{ info.batch_no }}
        </div>
        <div>
          <text>{{ t('createtime') }} ：</text>
          {{ info.createtime }}
        </div>
        <div>
          <text>{{ t('paycode') }} ：</text>
          {{ info.pay_code || '' }}
        </div>
        <div>
          <text>{{ t('Withdrawalcash') }} ：</text>
          {{ info.cash }}
        </div>
        <div>
          <text>{{ t('pcash') }} ：</text>
          {{ info.pcash }}
        </div>
        <div>
          <text>{{ t('sx_fee') }} ：</text>
          {{ info.fees }}
        </div>
        <div>
          <text>{{ t('Withdrawalisaudit') }} ：</text>
          {{ info.isaudit }}
        </div>
        <div>
          <text>{{ t('cashout_account') }} ：</text>
          {{ info.cashout_account }}
        </div>
        <div>
          <text>{{ t('audit_time') }} ：</text>
          {{ info.audit_time }}
        </div>
        <div>
          <text>{{ t('iscomplete') }} ：</text>
          {{ info.iscomplete }}
        </div>
        <div>
          <text>{{ t('completetime') }} ：</text>
          {{ info.completetime || '' }}
        </div>
        <!-- <div>
          <text>{{ t('signupdata') }} ：</text>
          {{ info.note }}
        </div> -->
        <div class="signupdata df">
          <text>{{ t('signupdata') }} ：</text>
          <img :src="info.signupdata" alt="" />
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script setup>
import { useI18n } from 'vue-i18n'
const { t } = useI18n()
import { reactive, ref, onMounted, getCurrentInstance } from 'vue'
const { proxy } = getCurrentInstance()
const small = ref(true)
const background = ref(false)
const disabled = ref(false)
const handleSizeChange = (val) => {
  page.page_size = val
  withdrawalList()
}
const handleCurrentChange = (val) => {
  page.page = val
  withdrawalList()
}
const statusStyle = (status) => {
  if (status === '完成') {
    return 'status-complete'
  } else if (status === '退回') {
    return 'status-retire'
  } else if (status === '申请' || status === '申請') {
    return 'status-apply'
  } else {
    return 'status-default'
  }
}
// 获取列表
const loading = ref(false)
const ListData = ref([])
const total = ref(0)
const page = reactive({
  page: 1,
  page_size: 10,
  device: 5,
})
const withdrawalList = () => {
  loading.value = true
  proxy
    .$post('/Finance/Withdrawalapi/withdrawalList', page)
    .then((res) => {
      ListData.value = res.data
      total.value = Number(res.total)
      loading.value = false
    })
    .catch((res) => {
      loading.value = false
    })
}
// 获取详情
const dialogVisible = ref(false)
const info = ref({})
const withdrawaldetail = (id) => {
  loading.value = true
  proxy
    .$post('/finance/withdrawalapi/withdrawaldetail', {
      id: id,
    })
    .then((res) => {
      info.value = res.data
      dialogVisible.value = true
    })
    .catch((res) => {})
}

onMounted(() => {
  withdrawalList()
})
</script>

<style scoped lang="scss">
@import '../../../style/scss/payApply';
</style>
